import 'package:animated_background/animated_background.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:hao/page/user/ForgetPwdPage.dart';
import 'package:hao/utils/ColorUtil.dart';
import 'package:hao/utils/ImageUtil.dart';
import 'package:hao/utils/Utils.dart';
import 'RegisterPage.dart';
import 'viewModel/LoginViewModel.dart';

class LoginPage extends StatefulWidget {
  const LoginPage({Key? key}) : super(key: key);

  @override
  State<LoginPage> createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage> with TickerProviderStateMixin {
  final LoginViewModel _viewModel =
      Get.put(LoginViewModel(), tag: "LoginViewModel");

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: AnimatedBackground(
        vsync: this,
        behaviour: RandomParticleBehaviour(
          options: const ParticleOptions(
            baseColor: Color.fromARGB(255, 0, 81, 255),
            spawnMinSpeed: 10,
            spawnMaxSpeed: 25,
            spawnMinRadius: 15,
            spawnMaxRadius: 50,
            particleCount: 12,
            minOpacity: 0.05,
            maxOpacity: 0.25,
            opacityChangeRate: 2,
          ),
        ),
        child: Container(
          child: ListView(
            padding: EdgeInsets.only(
                top: MediaQuery.of(context).padding.top,
                bottom: MediaQuery.of(context).padding.bottom),
            children: [
              LoginBtnWidget(
                "掌上租管家",
                "你的掌上管家",
              ),
              const SizedBox(
                height: 20,
              ),
              LoginInputWidget(
                zuTextField(
                    controller: _viewModel.phoneController,
                    hintText: '请输入手机号',
                    inputType: TextInputType.phone),
              ),
              const SizedBox(
                height: 20,
              ),
              LoginInputWidget(
                Row(
                  children: [
                    Expanded(
                        child: Obx(() => zuTextField(
                            controller: _viewModel.pwdController,
                            hintText: '请输入密码',
                            obscureText: _viewModel.obscure.value,
                            inputType: TextInputType.visiblePassword))),
                    GestureDetector(
                      onTap: () {
                        _viewModel.obscure.value = !_viewModel.obscure.value;
                      },
                      child: Obx(() => loadAssetImage(
                          _viewModel.obscure.value
                              ? "login_see"
                              : "login_unsee",
                          width: 25)),
                    )
                  ],
                ),
              ),
              const SizedBox(
                height: 30,
              ),
              LoginBgWidget("登录", () {
                _viewModel.loginClick();
              }),
              const SizedBox(
                height: 20,
              ),
              Container(
                margin: const EdgeInsets.symmetric(horizontal: 40),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    GestureDetector(
                      child: Text(
                        "账号注册",
                        style: Get.textTheme.subtitle2,
                      ),
                      onTap: () {
                        Get.to(() => RegisterPage());
                      },
                    ),
                    GestureDetector(
                      onTap: () {
                        Get.to(() => ForgetPwdPage());
                      },
                      child: const Text("忘记密码"),
                    )
                  ],
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
}

LinearGradient userBgGradient() {
  return  LinearGradient(
      begin: Alignment(0, 1),
      end: Alignment(0, 0),
      colors: [Get.theme.primaryColor, Get.theme.scaffoldBackgroundColor]);
}

Widget LoginBtnWidget(String title, String desc) {
  return Container(
    margin: const EdgeInsets.all(40),
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(
          title,
          style: Get.textTheme.headlineLarge,
        ),
        const SizedBox(
          height: 14,
        ),
        Text(desc, style: Get.textTheme.subtitle2)
      ],
    ),
  );
}

Widget LoginInputWidget(Widget child) {
  return Container(
    margin: const EdgeInsets.symmetric(horizontal: 40),
    height: 48,
    child: child,
    padding: const EdgeInsets.symmetric(horizontal: 12),
    alignment: Alignment.centerLeft,
    decoration: BoxDecoration(
        color: Get.theme.primaryColor,
        boxShadow: [haoBoxShadow()],
        borderRadius: BorderRadius.circular(24)),
  );
}

Widget LoginBgWidget(String title, VoidCallback callback) {
  return GestureDetector(
    onTap: () {
      callback();
    },
    child: Container(
      margin: const EdgeInsets.symmetric(horizontal: 40),
      height: 48,
      alignment: Alignment.center,
      decoration: BoxDecoration(
          color: MAIN_COLOR, borderRadius: BorderRadius.circular(24)),
      child: Text(
        title,
        style: const TextStyle(
            color: COLOR_WHITE_1, fontWeight: FontWeight.w700, fontSize: 18),
      ),
    ),
  );
}
